<template>
    <div id="home" class="mt-4">
        <h2>简易用户管理系统</h2>
        <div class="form-group row">
            <div class="col-sm-12">
                <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="输入姓名或手机或邮箱" v-model="search" />
            </div>
        </div>
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th scope="col">姓名</th>
                    <th scope="col">手机</th>
                    <th scope="col" colspan="2">邮箱</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in filterData">
                    <td>{{item.name}}</td>
                    <td>{{item.mobilephone}}</td>
                    <td>{{item.email}}</td>
                    <td><router-link class="btn btn-outline-secondary btn-sm" tag="button" :to="`/details/${item.id}`">详情</router-link></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data() {
            return {
                dataList: [],
                search: ""
            }
        },
        computed: {
            filterData() {
                const search = this.search.toLowerCase();
                return this.dataList.filter(item => item.name.toLowerCase().match(search)||item.mobilephone.toLowerCase().match(search)||item.email.toLowerCase().match(search));
            }
        },
        created() {
            this.axios.get("http://localhost:3000/user").then(response => this.dataList = response.data).catch(error => console.log(error));
            console.log()
        }
    }
</script>

<style scoped>
    button {color: #000;}
</style>